<template>
  <div class="category">
    <!-- 侧边主分类 -->
    <van-sidebar v-model="active" @change="getSubData">
      <van-sidebar-item 
      v-for="item in categories"
      :key="item.categoryid"
      :title="item.note" />
    </van-sidebar>
    <!-- 子分类 -->
    <div class="sub-category">
      <van-grid :column-num="2" :icon-size="64" >
          <van-grid-item 
          v-for="item in subCategory"
          :key="item.id"
          :icon="item.image" 
          :text="item.title" 
          to="/detail"
          />
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRoute} from 'vue-router'
import { getCategoryData, getSubCategoryData } from '../../api/category'

const route = useRoute()
const active = ref(route.params.id-1); 
const categories  = ref([])
const subCategory = ref([])


// 获取总分类
async function getAllData(){ 
    const result = await getCategoryData()
    categories.value.push(...result)
    getSubData(active.value?active.value:'0')
}
getAllData()

//获取子分类
const  getSubData = async(index)=>{

    const {categoryid} = categories.value[index]
    const result = await getSubCategoryData(categoryid)
    subCategory.value = result.list
}
</script>

<style  scoped>
.category{
  display: flex;
}
.category .sub-category{
  flex: 1;
}
</style>
